<!--监听监听天数-->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <section class="header-section">
        <el-form :inline="true" class="m-t-1 apply-card ky-form-inline ky-form-inline-sm">
          <el-form-item label="医院名称" label-width="80px" prop="hospitalCode">
            <el-select style="width:100%" size="small" filterable v-model="listQuery.hospitalCode" @change="changeHosp" placeholder="请选择医院">
              <el-option
                v-for="item in mx_hospitalList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影像区域" label-width="80px" prop="depArea">
            <el-select style="width:100%" size="small" v-model="listQuery.depArea" @change="changeDepArea" placeholder="请选择" clearable>
              <el-option
                v-for="item in depAreaOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查部门" label-width="80px" prop="dep">
            <el-select style="width:100%" size="small" v-model="listQuery.dep" placeholder="请选择" clearable>
              <el-option
                v-for="item in depOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="40px">
            <el-button type="primary" class="m-l-0" icon="el-icon-search" size="small" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </section>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <section class="content-section">
        <div class="content-title">
          <span>监听天数列表</span>
          <el-button class="add-button" type="primary" size="small" @click="handleAdd"><i class="el-icon-plus icon"></i>添加</el-button>
        </div>
        <el-table v-loading="loading" size="medium" :data="dataTable" border class="ky-table">
          <el-table-column prop="hospitalCode" label="医院名称" :formatter="frtHospCode" min-width="160"> </el-table-column>
          <el-table-column prop="depArea" label="影像区域"> </el-table-column>
          <el-table-column prop="dep" label="检查部门"> </el-table-column>
          <el-table-column prop="dayNum" label="天数"> </el-table-column>
          <el-table-column prop="updateUserName" label="修改人"> </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="200"> </el-table-column>
          <el-table-column prop="createUserName" label="创建人"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200"> </el-table-column>
          <el-table-column label="操作" width="200" fixed="left">
            <template slot-scope="scope">
              <el-button
                type="primary"
                style="margin-right:6px;"
                @click="handleEdit(scope.$index, scope.row)"
                size="small"
              ><i class="el-icon-edit"></i>编辑</el-button>
              <el-button
                type="danger"
                style="margin-right:6px;"
                @click="handleDelete(scope.$index, scope.row)"
                size="small"
              ><i class="el-icon-delete"></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <paginationCont
          :total="totalCount"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="fetchData"
        />
      </section>
    </el-card>
    <addDayDlg
      :dialog-day-visible.sync="dialogDayVisible"
      :day-data="curRow"
      @refreshDay="search"/>
  </div>
</template>

<script>
import { getDepAreaList, getDepList, getAppointmentMonitorDayGetPages, deleteAppointmentMonitorDay } from '@/api/api.js'
import { Options } from '@/utils/constant'
import paginationCont from '@/components/Pagination/index'
import addDayDlg from './addDialog'

export default {
  name: 'Dictionary',
  components: {
    paginationCont,
    addDayDlg
  },
  data() {
    return {
      options: Options,
      depArea: [],
      dep: [],
      checkRoom: [],
      checkClass: [],
      listQuery: {
        hospitalCode: '',
        depArea: '',
        dep: ''
      },
      depAreaOptions: [],
      depOptions: [], // 检查部门
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      dataTable: [],
      loading: false,
      dialogDayVisible: false,
      curRow: {},
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  created() {
    this.$getHospitalList()
    this.init()
  },
  methods: {
    init() {
      this.listQuery.hospitalCode = this.$store.state.user.hospitalCode || this.mx_hospitalList[0].code
      this.changeHosp()
    },
    search() {
      this.currentPage = 1
      this.fetchData()
    },
    fetchData() {
      if (!this.listQuery.hospitalCode) {
        this.$message.warning('请选择医院')
        return
      }
      this.loading = true
      this.listQuery.pageSize = this.pageSize
      this.listQuery.pageNumber = this.currentPage

      getAppointmentMonitorDayGetPages(this.listQuery).then(async res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.dataTable = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getDepAreaOptions() {
      return new Promise(async resolve => {
        await getDepAreaList({ hospitalCode: this.listQuery.hospitalCode }).then(res => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getDepOptions() {
      const params = {
        hospitalCode: this.listQuery.hospitalCode,
        depArea: this.listQuery.depArea
      }
      return new Promise(async resolve => {
        await getDepList(params).then(res => {
          if (res.code === 10000) {
            this.depOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    changeHosp() {
      // if (!this.listQuery.hospitalCode) return
      // 关联：影像、检查部门、检查分组、检查设备、检查机房
      this.depAreaOptions = []
      this.depOptions = []

      this.listQuery.depArea = ''
      this.listQuery.dep = ''

      this.dataTable = []
      this.totalCount = 0

      try {
        this.getDepAreaOptions()
        this.getDepOptions()
        this.search()
      } catch (err) {
        console.log(err)
      }
    },
    changeDepArea() {
      // if (!this.listQuery.depArea) return
      // 关联：检查部门、科室
      this.depOptions = []
      this.listQuery.dep = ''
      try {
        this.getDepOptions()
      } catch (err) {
        console.log(err)
      }
    },
    handleAdd() {
      this.dialogDayVisible = true
      this.curRow = {}
      this.curRow.hospitalCode = this.listQuery.hospitalCode
    },
    handleEdit(i, row) {
      this.dialogDayVisible = true
      this.curRow = row
      console.log('this.curRow', this.curRow)
    },
    handleDelete(i, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(row)
      }).catch(() => {})
    },
    // 删除
    deleteData(row) {
      let data = {
        id: row.id,
        hospitalCode: row.hospitalCode
      }
      deleteAppointmentMonitorDay(data).then(res => {
        if (res && res.code === 10000) {
          this.fetchData()
          this.$message.success('删除成功')
        }
      })
    },
    // 格式化医院code
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    }
  }
}
</script>
<style lang="scss" scoped>
.ky-container{
    .content-title{
        margin-bottom: 10px;
        span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
        }
        .add-button{
            height: 32px;
            margin-left: 16px;
        }
    }
}
</style>
